<template>
  <a-result status="404" title="404 页面不存在">
    <div style="background-color: #ececec; padding: 10px;height:320px;">
      <a-row>
        <a-col :span="4">
          <a-card hoverable style="width: 240px" :bordered="false">
            <template #cover>
              <img alt="微信二维码" :src="require('../assets/wechat_qrcode.png')" />
            </template>
            <a-card-meta title="有任何问题，请与我联系">
              <template #description>微信二维码</template>
            </a-card-meta>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card hoverable style="width: 240px" :bordered="false">
            <template #cover>
              <img alt="微信赞赏码" :src="require('../assets/wechat_reward_qrcode.png')" />
            </template>
            <a-card-meta title="狠狠地，打赏我吧！">
              <template #description>微信赞赏码</template>
            </a-card-meta>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card hoverable style="width: 240px" :bordered="false">
            <template #cover>
              <img alt="微信公众号" :src="require('../assets/wechat.png')" />
            </template>
            <a-card-meta title="关注我吧！详细技术分享">
              <template #description>微信公众号</template>
            </a-card-meta>
          </a-card>
        </a-col>
        <a-col :span="4">
          <!-- <a-card hoverable style="width: 240px">
            <template #cover>
              <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
            </template>
            <a-card-meta title="Europe Street beat">
              <template #description>www.instagram.com</template>
            </a-card-meta>
          </a-card> -->
          <div>
            <span>
              {{ sentence }}
            </span>
          </div>
        </a-col>
        <a-col :span="4">
          <div>
            <a-button size="small" @click="loadSentence">加载句子</a-button>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-result>
</template>

<script>
import axios from 'axios'
export default {
  name: 'NotFoundView',
  components: {
  },
  data() {
    return {
      sentence: ''
    }
  },
  methods: {
    loadSentence() {
      axios.get('https://v1.hitokoto.cn')
        .then(({ data }) => {
          this.sentence = data.hitokoto
          // console.log(this.sentence)
        })
        .catch(
          () => {
            console.error
            this.sentence = "加载句子失败，请稍后重试"
          }
        )
    }
  },
  mounted() {
    this.loadSentence()
  }
}
</script>
<style scoped>
a-image {
  display: block;
  margin: 0 auto;
}
</style>